<template>
    <div>
        <div class="bos">
            <div class="boa">
                <div class="biaoT">
                    <img src="@/assets/imgSrc/biaoTou1.png" alt="" />
                    <div class="biaoTZT">报表下载</div>
                </div>
                <div class="gunD">
                    <div class="box" v-for="(item, index) in arr" :key="item.id" @mouseover="dowmloadover(index)"
                        @mouseleave="downloadleave(index)" :class="isAcitive === index ? 'isAcitive' : ''"
                        @click="lookorgDetail(index, item.id)">
                        <div style="display: flex;align-items: center;">
                            <div class="boxLeft">
                                <img src="@/assets/img/theme/403.png" alt="">
                            </div>
                            <div class="boxRight">
                                <div class="boxRightOne">{{ item.fileName }}</div>
                                <div class="boxRightTwo">
                                    <span>{{ item.dataItems }}</span>
                                </div>
                            </div>
                        </div>
                        <!-- v-if="downLoadShow" -->
                        <div class="btn"  @click="downLoad(index)">下载</div>
                        <!-- <div v-else style="width: 75px;color:#fff" @click="downLoad(index)">
                            <a-progress :percent="30" size="small" strokeColor="#1FD0A3" />
                        </div> -->
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TransitLeftFooter',

    data() {
        return {
            downLoadShow: true,
            isAcitive: false, // 移入变色
            arr: [],
        }
    },
    created() {
        this.init()
    },
    mounted() {
        // this.init();
    },

    methods: {
        init() {
            this.serch()
        },
        downLoad(index) {
            this.downLoadShow = !this.downLoadShow;
            this.$router.push('/bbzx/doorReportFile')
        },
        serch() {
            this.$api.GET('/modules/doorReportFile/pageList').then(res => {
                console.log('报表下载',res);
                this.arr = res.data;
            });
        },
        // 鼠标点击事件 给变量赋值当前index
        lookorgDetail(index, id) {
            this.isAcitive = index
            console.log(id);
            // this.$router.push('/bbzx/doorReportFile')
        },
        // 鼠标移入赋值index 
        dowmloadover(index) {
            this.isAcitive = index
        },
        // 鼠标移出 
        downloadleave(index) {
            this.isAcitive = false
        },
    }
};
</script>

<style lang="less" scoped>
.bos {
    // height: 36vh;
    margin: 20px 0;
    border: 2px solid #0044ff;
    border-radius: 10px;
    box-shadow: inset 0px 0px 10px 34px rgba(3, 9, 90, 60%);
}

.boa {
    padding: 0 15px;
    // width: 100%;
    // height: 405px;
}

.biaoT {

    text-align: center;
    position: relative;
    top: -2px;
    height: 60px;

    img {
        width: 300px;
    }

    .biaoTZT {
        color: #fff;
        position: relative;
        top: -47px;
        font-size: 21px;
        font-weight: 600;
    }
}

.gunD {
    overflow: auto;
    height: 335px;
    padding: 10px 0;
}

::-webkit-scrollbar {
    width: 0;
    height: 10px;
}

.isAcitive {
    cursor: pointer; // 鼠标小手
    background: #0031B4 !important;
}

.box {
    // width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    background-color: rgba(0, 15, 70, 0.8);
    border-radius: 10px;
    margin-bottom: 10px;
    // width: 410px;

    .boxLeft {
        padding: 0px 10px 0 0;
        display: flex;
        align-items: center;

        img {
            border-radius: 50%;
            width: 50px;
            height: 50px;
        }
    }
}

.boxRight {
    .boxRightOne {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        padding-bottom: 10px;
        padding-right: 20px;
        width: 200px;
        /* 设置元素的宽度 */
        white-space: nowrap;
        /* 禁止文字换行 */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .boxRightTwo {
        font-size: 15px;
        color: #8c93a1;

        .boxRight-spanOne {
            color: #50b4d2;
            font-weight: 600;
            padding-right: 10px;
        }
    }
}

.btn {
    color: #e0dede;
    font-size: 14px;
}

::v-deep(.ant-progress-text) {
    color: #fff !important;
}
</style>
